<template>
  <div class="changePwd_container">

    <!-- 修改密码表单 -->
    <div class="changePwdForm">
      <mt-field :state="oldPwdState" placeholder="请输入旧密码(8~20个数字、字母和特殊字符号)" type="password" v-model="oldPwd"></mt-field>
      <mt-field :state="newPwdState" placeholder="请输入新密码(8~20个数字、字母和特殊字符号)" type="password" v-model="newPwd"></mt-field>
      <mt-field :state="confirmNewPwdState" placeholder="请确认新密码(8~20个数字、字母和特殊字符号)" type="password" v-model="confirmNewPwd"></mt-field>
      <mt-button @click="saveNewPwd" class="saveNewPwdBtn" type="primary">保存</mt-button>
    </div>

    <p class="protocol">注册/登录即代表您已同意<span>《华润燃气用户协议》</span></p>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      // 注册表单的数据绑定对象
      oldPwd: '',
      newPwd: '',
      confirmNewPwd: '',
      // 注册表单的格式状态
      oldPwdState: '',
      newPwdState: '',
      confirmNewPwdState: ''
    }
  },
  created () {},
  methods: {
    // 点击注册按钮
    saveNewPwd () {
      // 判断用户输入的表单项是否符合格式要求
      const isOk = this.oldPwdState === 'success' && this.newPwdState === 'success' && this.confirmNewPwdState === 'success'
      if (!isOk) {
        Toast({
          message: '表单项格式不正确',
          position: 'middle',
          duration: 3000
        })
        return
      }
      // 判断两次输入的新密码是否一致
      const isSome = this.newPwd.trim() === this.confirmNewPwd.trim()
      if (!isSome) {
        Toast({
          message: '两次输入的新密码不一致',
          position: 'middle',
          duration: 3000
        })
        this.confirmNewPwdState = 'error'
        // return
      }
      // 拼接请求参数对象
      // const changePwdForm = {
      //   oldPwd: this.oldPwd,
      //   newPwd: this.newPwd
      // }

      // 发送注册请求
      // this.$http.post('/user/changePwd', changePwdForm)
    }
  },
  watch: {
    oldPwd: function (val) {
      const length = val.trim().length
      if (length >= 8 && length <= 20) {
        this.oldPwdState = 'success'
      } else {
        this.oldPwdState = 'error'
      }
    },
    newPwd: function (val) {
      const length = val.trim().length
      if (length >= 8 && length <= 20) {
        this.newPwdState = 'success'
      } else {
        this.newPwdState = 'error'
      }
    },
    confirmNewPwd: function (val) {
      const length = val.trim().length
      if (length >= 8 && length <= 20) {
        this.confirmNewPwdState = 'success'
      } else {
        this.confirmNewPwdState = 'error'
      }
    }
  }

}
</script>

<style lang="less" scoped>
  .changePwd_container {
    position: relative;
    box-sizing: border-box;
    padding: 79px 20px 10px;
    height: 100%;
  }

  // 注册表单块
  .changePwdForm {
    margin-top: 20px;

    /deep/ .mint-cell-wrapper {
      background-position: bottom;
    }

    /deep/ input {
      font-size: 13px;
    }

    /deep/ input::-webkit-input-placeholder {
      font-size: 13px;
      color: #CCCCCC;
    }
  }

  .active {
    color: rgb(153, 153, 153);
  }

  .saveNewPwdBtn {
    margin-top: 25px;
    width: 100%;
    font-size: 14px;
    background-color: #F59E0E;
  }

</style>
